<template>
  <div class="footer_info">
    <div class="container">
      <ul class="link">
        <li v-for="(item,index) in nav" :key="index" @click="routerLink(index,item.path)">{{item.title}}</li>
      </ul>
      <div class="address">
        <p>TEL    18835575555   18835566666</p>
        <p>ADD    山西综改示范区太原学府园区长治西巷5号</p>
        <p>EMAIL   721829419@qq.com</p>
      </div>
      <p class="ewm">
        <img src="/static/img/bottom_ewm.jpg" alt="">
        <span>微信公众号</span>
      </p>
    </div>
  </div>
</template>
<script>
  export default {
    name: 'FooterLink',
    props: {
      imgs: {
        type: Array,
        default () {
          return []
        }
      }
    },
    data: () => ({
      nav: [
        {title: '首页', path: '/'},
        {title: '平台介绍', path: '/intro'},
        {title: '热门专业', path: '/hot'},
        {title: '关于我们', path: '/about'}
      ],
      pic: '',
      navIndex: 0,
      ewmImg: '',
      swiperOptions: {
        pagination: '.swiper-pagination',
        paginationType: 'fraction',
        observeParents: true,
        observer: true
      }
    }),
    created () {
    },
    methods: {
      routerLink (index, path) {
        // 点击哪个路由就赋值给自定义的下标
        this.navIndex = index
        // 路由跳转
        this.$router.push(path)
      }
    }
  }
</script>
<style lang="stylus" scoped>
  @import '~styles/mixins.styl'
  @import '~styles/varibles.styl'
  .footer_info {
    background $darkBgColor;
    padding 60px 0;
    .container {
      display flex
      margin auto
      width 700px;
    }
  }

  .link, .address, .ewm {
    color #fff;
    font-size: 12px;
    line-height: 36px;
    opacity: 0.9;
  }

  .link, .ewm {
    width 140px;
  }

  .ewm {
    text-align right
    img{
      width 80px;
      height 80px;
      display inline-block;
      border:1px solid #efefef
    }
      span{
        display inline-block;
        width 80px;
        text-align center
      }
  }

  .link {
    font-size: 12px;
    line-height: 36px;
    opacity: 0.9;
    border-right 1px solid #515151
    li {
      cursor: default;
      &:hover {
        color #ccc;
      }
    }
  }

  .address {
    flex: 1;
    padding-left 77px;
    border-right 1px solid #515151
  }
</style>
